<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 旋转游戏
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div id="tran-image" class="tran-image">
                <img :src="imgSrc" class="image"/>
            </div>
            <div class="handle-box" style="text-align: center; margin-top: 100px;">
                <el-button type="primary" icon="el-icon-search" @click="handlePlay">旋转</el-button>
                <el-button type="primary" icon="el-icon-search" @click="handlePause">暂停</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'test',
        data() {
            return {
                imgSrc: "https://img-blog.csdnimg.cn/a0d98281da88480aa8be2e0dbda23fd6.jpg",
                isPlay: false,
                num: 0
            }
        },
        methods: {
            handlePlay() {
                if (!this.isPlay){
                    this.isPlay = true;
                    this.trans = document.getElementById("tran-image");
                    this.trans.timer1 = setInterval(() => {
                        this.num = this.num + 1;
                        this.trans.style.transform  = "rotate(" + this.num + "deg)";
                        if (this.num >= 360){
                            this.num = 0;
                        }
                    }, 1);
                }
            },
            handlePause() {
                console.log("停止旋转");
                clearInterval(this.trans.timer1);
                this.isPlay = false;
            }
        }
    };
</script>

<style scoped>
    .tran-image{
        z-index: 1;
    }

    .image {
        display: block;
        margin: 0 auto;
        width: 200px;
        height: 200px;
        border-radius: 50%;
    }


    .handle-box {
        z-index: 100;
        margin-bottom: 20px;
    }
</style>